data-page-links CSS variables

code:style.css

:root {

--links-bg: transparent;

--links-bg-hover: var(--card-bg, white);

--links-line: 4; /* links表示行数 */

--links-line-searching: 2; /* 関連頁検索中のlinks表示行数 */

--links-line-list: 2;

--links-line-height: 1.3;

--links-font-size: 12px;

--links-padding-top: 2px;

--card-padding-btm: 2px; /* masonry page list CSS との併用に必要 */

--links-padding-btm: var(--card-padding-y, 0);

--links-padding-x: 2px;

/* cardの高さ上限に対してlinksが大きくなりすぎないよう調整 */

--card-max-height-links-default: calc(12vh + 4vw);

--card-max-height-links-with: calc(var(--card-min-width) + 3vh + 2vw));

--card-max-height-links: var(--card-max-height-links-with, var(--card-max-height-links-default));

--card-min-height: 60px;

--item-padding-btm0: calc(var(--links-line) * var(--links-font-size) * var(--links-line-height) + (var(--links-line-height) - 1) * .8 * var(--links-font-size) + var(--links-padding-btm));

--item-padding-btm0-searching: calc(var(--links-line-searching)*var(--links-font-size)*var(--links-line-height) + (var(--links-line-height) - 1) * .8 * var(--links-font-size) + var(--links-padding-btm));

--item-padding-btm0-list: calc(var(--links-line-list) * var(--links-font-size) * var(--links-line-height) + (var(--links-line-height) - 1) * .8 * var(--links-font-size));

--item-padding-btm-or: calc(var(--card-max-height-links) - var(--card-min-height));

--item-padding-btm-or-searching: calc(var(--card-match-max-height, 100em) - var(--card-min-height));

--item-padding-btm: min(var(--item-padding-btm0), var(--item-padding-btm-or));

--item-padding-btm-list: min(var(--item-padding-btm0-list), var(--item-padding-btm-or));

}